<script setup lang="ts">
import { Question } from '@/api/subject/type';
import YHeader from '@/components/YHeader.vue';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ChoiceQuestion from './components/ChoiceQuestion.vue';
import JudgeQuestion from './components/JudgeQuestion.vue';
import BlankQuestion from './components/BlankQuestion.vue';
import EssayQuestion from './components/EssayQuestion.vue';
import { createQuestion } from '@/api/subject';
import { showToast } from 'vant';
import { Result } from '@/utils/request';

const subjectId = ref('');

onMounted(() => {
    const route = useRoute();
    const id = route.query.id;
    if (!Array.isArray(id)) {
        subjectId.value = id as string;
    }
})
const router = useRouter();
const activeTab = ref(0);
const submit = (question: Question) => {
    console.log(question, subjectId.value);
    createQuestion(subjectId.value, question).then((res) => {
        const {msg} = res as Result;
        showToast(msg);
        router.go(-1);
    })
}
</script>

<template>
    <div class="container">
        <YHeader :name="'创建题目'"></YHeader>
        <div class="content">
            <van-tabs v-model:active="activeTab">
                <van-tab title="选择题">
                    <ChoiceQuestion @submit="submit" />
                </van-tab>
                <van-tab title="判断题">
                    <JudgeQuestion @submit="submit"/>
                </van-tab>
                <van-tab title="填空题">
                    <BlankQuestion @submit="submit"/>
                </van-tab>
                <van-tab title="简答题">
                    <EssayQuestion @submit="submit"/>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
    padding: 16px;
    .form {
        margin-top: 16px;
    }
    .options {
        margin: 16px 0;
        .option-item {
            margin-bottom: 8px;
        }
        .add-option {
            margin-top: 16px;
        }
    }
}
</style>